import React, { Fragment } from 'react'
import { Select, Checkbox } from 'antd'
const { Option } = Select

const itemList: any = [{ name: "品牌", childs: ["熠雨"] }, { name: "型号", childs: [192] }];
const tdStyle = { border: "1px solid #E9E9E9", padding: "7px 7px" }
export default () => {
    return (
        <div>
            <nav style={{ borderLeft: "3px solid #4685fd", paddingLeft: "5px", marginBottom: "20px" }}>基础信息</nav>
            商品信息：
            <Select placeholder="选择商品分类" style={{ width: "180px" }}>
                <Option value="1">
                    茶几
                </Option>
            </Select>
            <nav style={{ borderLeft: "3px solid #4685fd", paddingLeft: "5px", margin: "20px 0" }}>商品属性</nav>

            <table style={{ width: "100%", borderCollapse: "collapse" }}>
                <tbody>
                    {
                        itemList.map((item: any, inx: any) => {
                            return (
                                <tr key={inx}>
                                    <td style={{ width: "220px", ...tdStyle, textAlign: "right" }}>{item.name}</td>
                                    <td style={tdStyle}>
                                        {
                                            item.childs.map((child: any, key: any) => {
                                                return <Fragment key={key}> <Checkbox /> {child}</Fragment>
                                            })
                                        }

                                    </td>
                                </tr>
                            )
                        })
                    }

                </tbody>
            </table>
        </div>
    );
}